//@ts-nocheck
import React, { useEffect, useRef } from 'react'

import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/title'
import './index.less'

interface IProps {
  color: 'yellow' | 'green' | 'orange'
  count: number
  countSize?: number
  globalBackgroundColor?: string
}

const RingChart: React.FC<IProps> = ({
  color,
  count,
  countSize = 18,
  globalBackgroundColor = 'white'
}) => {
  const chartWrapRef = useRef<any>(null)

  useEffect(() => {
    let chart = echarts.init(chartWrapRef.current)
    let linearColor: any = {}
    let shadowColor: string
    let titleColor: string

    switch (color) {
      case 'yellow':
        linearColor = {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#FFEA2B' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#FFED82' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
        shadowColor = 'rgba(140, 122, 0, 0.12)'
        titleColor = '#E3CF5A'
        break
      case 'green':
        linearColor = {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#68E77C' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#A1F5B3' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
        shadowColor = 'rgba(1, 88, 17, 0.12)'
        titleColor = '#5AC36C'
        break
      case 'orange':
        linearColor = {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#FF651F' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#FF9342' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
        shadowColor = 'rgba(46, 15, 0, 0.12)'
        titleColor = '#FF915F'
        break
    }

    chart.setOption({
      title: {
        show: true,
        text: count,
        top: 'middle',
        left: '50%',
        textAlign: 'middle',
        padding: 0,
        itemGap: 0,
        textStyle: {
          // width: 92,
          fontSize: countSize,
          fontWeight: 'bold',
          color: titleColor,
          fontFamily: 'DINAlternate-Bold, DINAlternate;'
        }
      },
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      },
      series: [
        {
          type: 'pie',
          radius: ['45%', '65%'],
          legendHoverLink: false,
          avoidLabelOverlap: false,
          showEmptyCircle: true,
          emptyCircleStyle: {
            color: globalBackgroundColor
          },
          zlevel: 0,
          itemStyle: {
            borderRadius: 100,
            color: `#fff`
          },
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          emphasis: {
            disabled: true,
            scale: false
          }
        },
        {
          type: 'pie',
          radius: ['45%', '65%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 100
            // borderColor: '#fff',
            // borderWidth: 2
          },
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: count / 100,
              name: 'Search Engine',
              itemStyle: {
                color: linearColor,
                shadowBlur: 32,
                shadowColor,
                shadowOffsetX: 0,
                shadowOffsetY: 2
              }
            },
            {
              value: (100 - count) / 100,
              name: 'Search Engine',
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            }
          ],
          emphasis: {
            disabled: true,
            scale: false
          }
        }
      ]
    })
  }, [color, count, countSize])
  return <div className="ring-chart" ref={chartWrapRef} />
}
export default (RingChart)
